<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #box {
            position: relative;
            overflow: hidden;
            width: 600px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid #ccc;
            box-sizing: border-box;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>


    <script>
        //随机气泡2
        /* 每个球都是一个对象 */
        /* 每个对象有 尺寸、背景色、位置（绝对定位，left top） */
        // function Ball(size, left, top, bgcolors) {
        function Bubble(id, size, left, top, opacity) {
            this.id = id || 'box';
            this.size = size || [10, 80];
            this.left = left || [0, 520];
            this.top = top || [0, 320];
            this.opacity = opacity || [0, 1];
        }

        // 根据球的尺寸生成具体的 html 结构
        Bubble.prototype.createBubble = function () {
            var size = this.getRand(this.size[0], this.size[1]),
                left = this.getRand(this.left[0], this.left[1]),
                top = this.getRand(this.top[0], this.top[1]),
                bgcolor = this.getBgColor(),
                opacity = Math.random(this.opacity[1] - this.opacity[0] + 1).toFixed(1);

            var div = document.createElement('div');
            div.className = 'bubble';
            div.style.width = size + 'px';
            div.style.height = size + 'px';
            div.style.borderRadius = size + 'px';
            div.style.position = 'absolute';
            div.style.top = top + 'px';
            div.style.left = left + 'px';
            div.style.backgroundColor = bgcolor;
            div.style.opacity = opacity;
            //添加节点
            document.getElementById(this.id).appendChild(div);

            var randDir = this.getRandDir();
            // 调用移动方法
            this.move(div, left, top, randDir);
        }


        Bubble.prototype.move = function (ele, left, top, dir) {
            // 根据传递来的 dir 方向实现小球的移动过程
            var dir = dir, x = left, y = top, width = this.left[1], height = this.top[1];
            setInterval(function () {
                switch (dir) {
                    case 'left':
                        x--;
                        dir = x <= 0 ? 'right' : dir;
                        // if (x <= 0) _dir = 'right';
                        break;
                    case 'right':
                        x++;
                        dir = x >= width ? 'left' : dir;
                        // if (x >= 450) _dir = 'left';
                        break;
                    case 'top':
                        y--;
                        dir = y <= 0 ? 'bottom' : dir;
                        // if (y <= 0) _dir = 'bottom';
                        break;
                    case 'bottom':
                        y++;
                        dir = y >= height ? 'top' : dir;
                        // if (y >= 450) _dir = 'top';
                        break;
                }
                // if (_dir == 'left') {
                //   x--;
                //   if (x <= 0) {
                //     _dir = 'right'
                //   }
                // } else if (_dir == 'right') {
                //   x++;
                //   if (x >= 450) {
                //     _dir = 'left';
                //   }
                // } else if (_dir == 'top') {
                //   y--;
                //   if (y <= 0) {
                //     _dir = 'bottom'
                //   }
                // } else if (_dir == 'bottom') {
                //   y++;
                //   if (y >= 450) {
                //     _dir = 'top';
                //   }
                // }
                ele.style.left = x + 'px';
                ele.style.top = y + 'px';
            }, 1000 / 60);
        }

        // 返回随机的颜色值
        Bubble.prototype.getBgColor = function () {
            var bgcolors = ["#f83600", "#FFF94C", "#0072ff", "#780206", "#7B920A", "#dc2430", "#A83279", "#00bf8f", "#FF512F", "#485563", "#061700", "#02AAB0"];
            return bgcolors[this.getRand(0, bgcolors.length - 1)];
        }

        /* 实现数值的随机 */
        Bubble.prototype.getRand = function (min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }

        // 返回随机的方向
        Bubble.prototype.getRandDir = function () {
            var direction = ['left', 'right', 'top', 'bottom'];
            return direction[this.getRand(0, direction.length - 1)];
        }


        for (let i = 1; i <= 50; i++) {
            // var bubbles = new Ball();
            new Bubble().createBubble();
        }

    </script>
</body>

</html>